Tło jednokolorowe

Tło jednokolorowe wstawiamy w CSS instrtukcją background-color:kolor;. Wartość koloru można podać we wszystkich formatach rozpoznawanych przez CSS. Div posiada tło background-color:cyan

Wstawianie grafiki jako tła

Selektor { background-image: url(ścieżka dostępu do obrazka) }.
Polecenie pozwala wstawić dowolny obrazek jako tło pod elementem. Pamiętaj jednak, żeby obrazek w tle nie był zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie.

Różne sposoby powtarzania grafiki w tle

selektor { background-repeat: powtarzanie }
- repeat - powtarzanie tła w obu kierunkach (domyślnie)
- repeat-x - powtarzanie tła tylko w kierunku poziomym
- repeat-y - powtarzanie tła tylko w kierunku pionowym
- no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
- space - przestrzeń pomiędzy obrazkami w tle zostanie dobrana w taki sposób, aby żadna grafika nie była przycięta w płaszczyźnie poziomej(CSS 3 - MSIE 9, Opera)
- round - wymiary obrazka w tle zostaną dopasowane w taki sposób, aby żadna grafika nie była przycięta w płaszczyźnie pionowej(CSS 3 - MSIE 9, Opera)

Polecenie pozwala zdefiniować sposób powtarzania się obrazka w tle obrazkowym. Normalnie kopie obrazka są ustawiane obok siebie tak, że zajmują cały obszar tła. Ale możliwe jest również zdefiniowanie powtarzania w poziomie czy w pionie lub całkowite zablokowanie.

Powtarzanie w poziomie

Powtarzanie w pionie

Bez powtarzania

Równomierne rozłożenie w poziomie

Równomierne rozłożenie w pionie

Pozycjonowanie

Pozwala ustalić pozycję obrazka w tle.
Selektor { background-position: pozycja }
Jako "pozycja" należy wpisać:
Jedną wartość:
center - obrazek na środku (w centrum)
left - obrazek po lewej
right - po prawej
top - na górze
bottom - na dole
jednostka długości - odległość od lewej krawędzi

Dwie wartości (oddzielone spacją):
left top - lewy-górny róg
left bottom - lewy-dolny róg
right top - prawy-górny róg
right bottom - prawy-dolny róg
dwie jednostki długości, z których pierwsza oznacza odległość od lewej krawędzi, a druga - od górnej
Przy wstawianiu więcej niż jednego obrazka jako tła, stosujemy przecinek jako rozdzielenie kolejnych pozycji(zestawu danych).

Pozycjonowanie równomierne pionowe